import { useState, useEffect } from 'react'
import Axios from 'axios'

function TOPbox({ obj: { wei, Lis } }) {
  //   console.log(wei, Lis)
  return (
    <div className={`con-hour ${wei} animated`}>
      {Lis.map((res, i) => {
        return (
          <a
            className="top-ten link-statistics  top-three clear"
            key={i}
            href="/link/33193594"
          >
            <div className="top-ten-matching-con left">
              {i === 0 ? (
                <img
                  className="circle"
                  src="https://dig.chouti.com/images/first-703e2c9dea.png"
                />
              ) : i === 1 ? (
                <img
                  className="circle"
                  src="https://dig.chouti.com/images/second-d1402e37e7.png"
                />
              ) : i === 2 ? (
                <img
                  className="circle"
                  src="https://dig.chouti.com/images/three-6396d64c8d.png"
                />
              ) : (
                <div className="top-shadow">
                  <span className="top-shadow-text">{i + 1}</span>
                </div>
              )}
              <img className="top-ten-matching-icon" src={res.imgUrl} />
            </div>
            <div className="top-ten-title left">{res.title}</div>
          </a>
        )
      })}
    </div>
  )
}

export default function View() {
  let [wei, setwei] = useState({
    TOP1: 'slideOutLeft',
    TOP2: 'slideNow',
    TOP3: 'slideOutRight',
    sum: 2,
  })
  let [Lis, setLis] = useState({ Lis1: [], Lis2: [], Lis3: [] })

  useEffect(() => {
    const CancelToken = Axios.CancelToken
    let cancel
    if (wei.sum === 1) {
      Axios.get('api/top10/h24', {
        cancelToken: new CancelToken(function executor(c) {
          // executor 函数接收一个 cancel 函数作为参数
          cancel = c
        }),
      }).then((res) => {
        if ((res.data.ok = true)) {
          setLis({ ...Lis, Lis1: res.data.data.feeds })
        }
      })
    } else if (wei.sum === 2) {
      Axios.get('api/top10/h72', {
        cancelToken: new CancelToken(function executor(c) {
          // executor 函数接收一个 cancel 函数作为参数
          cancel = c
        }),
      }).then((res) => {
        if ((res.data.ok = true)) {
          setLis({ ...Lis, Lis2: res.data.data.feeds })
        }
      })
    } else {
      Axios.get('api/top10/h168', {
        cancelToken: new CancelToken(function executor(c) {
          // executor 函数接收一个 cancel 函数作为参数
          cancel = c
        }),
      }).then((res) => {
        if ((res.data.ok = true)) {
          setLis({ ...Lis, Lis3: res.data.data.feeds })
        }
      })
    }
    return () => {
      cancel('取消请求')
    }
  }, [wei.sum, Lis])

  return (
    <div className="TOP">
      <div className="extra-common-con border-bottom1">
        <span className="title-line" />
        <span className="extra-title extra-title-left">最热榜</span>
        <span className="extra-title bold">TOP10</span>
      </div>
      <div className="extra-common-con mb-3 extra-common-con-no-bottom">
        <ul className="nav-tab clearfix">
          <li className="left nav-li nav-li-extra">
            <a
              className={wei.sum === 1 ? 'active' : ''}
              href="/not"
              onClick={(e) => {
                e.preventDefault()
                if (wei.sum === 3) {
                  setwei({
                    TOP1: 'slideNow',
                    TOP2: 'slideOutRight yin',
                    TOP3: 'slideOutRight',
                    sum: 1,
                  })
                } else {
                  setwei({
                    TOP1: 'slideNow',
                    TOP2: 'slideOutRight',
                    TOP3: 'slideOutRight',
                    sum: 1,
                  })
                }
              }}
              data-time="24hr"
            >
              24小时
            </a>
          </li>
          <li className="left nav-li">
            <span className="nav-line" />
          </li>
          <li className="left nav-li nav-li-extra">
            <a
              className={wei.sum === 2 ? 'active' : ''}
              href="/not"
              data-time="72hr"
              onClick={(e) => {
                e.preventDefault()
                setwei({
                  TOP1: 'slideOutLeft',
                  TOP2: 'slideNow ',
                  TOP3: 'slideOutRight',
                  sum: 2,
                })
              }}
            >
              3天
            </a>
          </li>
          <li className="left nav-li">
            <span className="nav-line" />
          </li>
          <li className="left nav-li nav-li-extra">
            <a
              className={wei.sum === 3 ? 'active' : ''}
              href="/not"
              data-time="168hr"
              onClick={(e) => {
                e.preventDefault()
                if (wei.sum === 1) {
                  setwei({
                    TOP1: 'slideOutLeft',
                    TOP2: 'slideOutLeft yin',
                    TOP3: 'slideNow ',
                    sum: 3,
                  })
                } else {
                  setwei({
                    TOP1: 'slideOutLeft',
                    TOP2: 'slideOutLeft',
                    TOP3: 'slideNow ',
                    sum: 3,
                  })
                }
              }}
            >
              一周
            </a>
          </li>
        </ul>
      </div>
      <div className="extra-common-con mb18 pdt0 mt-1">
        <div className="extra-links-con">
          {/* 转换区 */}
          <TOPbox obj={{ wei: wei.TOP1, Lis: Lis.Lis1 }} />
          <TOPbox obj={{ wei: wei.TOP2, Lis: Lis.Lis2 }} />
          <TOPbox obj={{ wei: wei.TOP3, Lis: Lis.Lis3 }} />
        </div>
      </div>
    </div>
  )
}
